/*----------------------------------------------------------------------------
CSS file for MDN Demo Studio demo wrapper frame
Created by Craig Cook - focalcurve.com
        on 26 January, 2011
-----------------------------------------------------------------------------*/

header, hgroup, nav, section, article, aside, footer, iframe { display: block; }
html, body, form, fieldset, legend, h1, h2, h3, h4, h5, h6, dt, dd, ul, ol, li, p { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a img { border: 0; }

html, body { height: 100%; background: #000; overflow: hidden; }

body { font: 12px/1.286 "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial, Helvetica, sans-serif; background: #000; color: #999; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }

:link, :visited { color: #fff; text-decoration: none; }
:link:hover, :link:focus, :link:active,
:visited:hover, :visited:focus, :visited:active { color: #eee; text-decoration: underline; }

#demobar { background: #000; border-bottom: 2px solid #f8d575; position: absolute; top: 0; width: 100%; -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25); box-shadow: 0 1px 3px rgba(0,0,0,.25); }

#logo, .title, .demo-title, .byline, .tools { float: left; }
#logo { font-size: 1em; height: 2em; padding: .5em 10px 0; border-right: 1px solid #333; }
.title { padding: .55em 20px 0; height: 2em; }
.demo-title { margin-right: 6px; font-weight: bold; }
.byline :link, .byline :visited { color: #999; }

#close { width: 34px; border-left: 1px solid #333; position: absolute; right: 0; top: 0; }
#close a { display: block; width: 34px; text-indent: -999em; overflow: hidden; height: 2.5em; background: #000 url("../img/demobox-icons.png") 11px -1142px no-repeat; }
#close a:hover, #close a:focus, #close a:active { background-color: #333; }

.tools { float: left; }
.tools li { float: left; margin: 0; border-left: 1px solid #333; }
.tools button { font-family: inherit; font-size: 1em; cursor: pointer; background: transparent none; margin: 0; padding: 0; border: 0; color: #fff; }
.tools .like span { display: block; white-space: nowrap; height: 1.5em; margin: -1px -3px; padding: .5em 10px .5em 35px; background: url("../img/demobox-icons.png") 12px -994px no-repeat; }
.tools .unlike span { display: block; white-space: nowrap; height: 1.5em; padding: .5em 10px .5em 35px; background: url("../img/demobox-icons.png") 12px -1044px no-repeat; }
.tools .like:hover span, .tools .like:focus span, .tools .unlike:hover span, .tools .unlike:focus span { background-color: #333; color: #eee; text-decoration: underline; }
.tools .share a { border-right: 1px solid #333; float: left; height: 1.5em; padding: .5em 12px .5em 35px; background: url("../img/demobox-icons.png") 12px -1092px no-repeat; }
.tools .share a:hover, .tools .share a:focus, .tools .share a:active { background-color: #333; }
.tools .share { position: relative; z-index: 99; }

#share-opts { margin: .25em 0; width: 220px; background: #000; }
#share-opts.js { position: absolute; top: 2.5em; left: -1px; z-index: 99; float: left; margin: 0; padding: 0 10px; background: #000; border: 1px solid #808080; -moz-box-shadow: 5px 5px 0 rgba(0,0,0,.5); -webkit-box-shadow: 5px 5px 0 rgba(0,0,0,.5); box-shadow: 5px 5px 0 rgba(0,0,0,.5); }
#share-opts li { font-size: 1.166em; float: none; border-left: 0; border-top: 1px dotted #3f3f3f; padding: .5em 0; margin: 0; background: none; }
#share-opts li:first-child { border: 0; }
#share-opts a { float: none; border: 0; padding: 0 0 0 25px; }
#share-opts a:hover, #share-opts a:focus, #share-opts a:active { background-color: transparent; }
#share-opts .twitter a { background-position: 0 -500px; color: #ff4675; }
#share-opts .facebook a { background-position: 0 -550px; color: #54aaff; }
#share-opts .link { padding-left: 25px; background: url("../img/demobox-icons.png") 0 -593px no-repeat; }
#shorturl { font-size: inherit; border: 0; background: #000; color: #ffc145; width: auto; padding: 0; }
#shorturl.focus { color: #000; background: #ffc145; }

#share-opts #shorturl ::-moz-selection { color: #000; background: #ffc145; }
#share-opts #shorturl ::selection { color: #000; background: #ffc145; }

/*** @Paging (Next and Prev) *********/
.paging { float: right; text-align: right; padding-right: 35px; }
.paging ul { margin: 0; list-style: none; }
.paging li { display: inline; }
.paging a { float: left; height: 1.5em; padding: .5em 15px .5em; border-left: 1px solid #333; background-image: url("../img/nav-arrows.png"); background-repeat: no-repeat; }
.paging a:hover, .paging a:focus, .paging a:active { background-color: #333; }
.paging li.prev a { padding-left: 25px; background-position: 8px -791px; }
.paging li.next a { padding-right: 25px; background-position: 88% -691px; }

#demoframe { background: #fff; border: 0; margin: 2.5em 0 0; padding: 0; width: 100%; height: 100%; }
